<template>
    <div>
        <header>
            <h2 class="head">气象污染数据的可视分析系统</h2>
        </header>
        <section class="container">
            <section class="itemLeft">
                <ItemPage>
                    <ItemScatter></ItemScatter>
                </ItemPage>
                <ItemPage>
                    <ItemLine></ItemLine>
                </ItemPage>
            </section>
            <section class="itemCenter">
                <itemCenter>
                    <ItemBar></ItemBar>
                </itemCenter>
                <itemCenterb>
                    <ItemRiver></ItemRiver>
                </itemCenterb>
            </section>
            <section class="itemRight">
                <ItemPage>
                    <ItemRadar></ItemRadar>
                </ItemPage>
                <ItemPage2>
                    <ItemLive></ItemLive>
                </ItemPage2>
            </section>
        </section>
    </div>
</template>

<script>
    import ItemPage from '@/components/itemPage.vue'
    import ItemPage2 from '@/components/itemPage2.vue'
    import itemCenter from '@/components/itemCenter.vue'
    import itemCenterb from '@/components/itemCenterb.vue'
    import ItemScatter from '@/components/itemScatter.vue'
    import ItemLine from '@/components/itemLine.vue'
    import ItemRadar from '@/components/itemRadar.vue'
    import ItemLive from '@/components/itemLive.vue'
    import ItemBar from '@/components/itemBar.vue'
    import ItemRiver from '@/components/itemRiver.vue'
    import { inject } from 'vue'
    export default {
        name:'homePage',
        components:{
            ItemPage,
            ItemPage2,
            ItemScatter,
            ItemLine,
            ItemRadar,
            ItemLive,
            itemCenter,
            itemCenterb,
            ItemBar,
            ItemRiver,
        },
        setup(){
            let $echarts=inject("echarts")
            let $http=inject("axios")
            console.log($echarts)
            console.log($http)
        }
    }
</script>

<style lang="css" scoped>
header {

    height: 50px;
    width: 100%;
    color:bisque;
    text-align: center;
}
.container {
    margin: 0 auto;
    border: 1px solid red;
    height: 740px;
    display: flex;
}
.itemLeft, .itemRight {
    flex: 3;
}
.itemCenter {
    flex: 5;
    height: 740px;
    border: 1px solid orchid;
}

</style>